<template>
<div>
  <van-nav-bar title="巡航员主页" right-text="退出" @click-right="onClickRight" :fixed="true"/>
  <div class="Echarts">
      <van-notice-bar
  :scrollable="true"
  text="新版本将于4月1日更新，各巡检员注意更新，否则将无法使用！！！"
/>
    <div id="main" style="width:300px;height:210px;margin-top:30px"></div>
    <div style="margin-top:-30px"><van-divider/></div>
    <div id="main2" style="width:300px;height:210px;margin-top:-30px;margin-top:30px;"></div>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      useuse:localStorage.getItem("useuse"),
    useempty:localStorage.getItem("useempty"),
    usedanger:localStorage.getItem("usedanger"),
    useorder:localStorage.getItem("useorder"),
     usenotpay:localStorage.getItem("usenotpay"),
      usepay:localStorage.getItem("usepay"),
       usesuccess:localStorage.getItem("usesuccess"),
    }
  },

  name: "Echarts",
  methods: {
    //预留退出按钮
     onClickRight() {
      this.$router.push('/')
      localStorage.clear
    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "泊位实时详情",
          left: "10%"
        },
        tooltip: {
          trigger: "item"
        },
        color:['#5470c6','#9a60b4','#ee6666'],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "40%",
            data: [
              { value:this.useuse, name: "使用中" },
              { value:this.useempty, name: "空闲中" },
              { value:this.usedanger, name: "故障" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

     taEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var taChart = this.$echarts.init(document.getElementById("main2"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "停车实时详情",
          left: "10%"
        },
        tooltip: {
          trigger: "item"
        },
        color:['#91cc75','#fac858','#ee6666'],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "40%",
            data: [
              { value: this.useorder, name: "进行中" },
              { value: this.usenotpay, name: "待支付" },
              { value: this.usepay, name: "已支付" },
              { value: this.usesuccess, name: "已完成" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      taChart.setOption(option);
    }
  },



created: function() {
    this.$axios({
        url: "/findallberths",
        method: "get",
        params:{pid:localStorage.getItem("sectionid")},
      })
      .then(res => {
        if (res.data.msg == 200) {
           var useuse = res.data.data.use;
         localStorage.setItem("useuse",useuse);
          var useempty = res.data.data.empty;
          localStorage.setItem("useempty",useempty);
          var usedanger = res.data.data.danger;
          localStorage.setItem("usedanger",usedanger);
            var useorder = res.data.data.usee;
          localStorage.setItem("useorder",useorder);
          var usenotpay = res.data.data.notpay;
          localStorage.setItem("usenotpay",usenotpay);
          var usepay = res.data.data.pay;
         localStorage.setItem("usepay",usepay);
          var usesuccess = res.data.data.success;
          localStorage.setItem("usesuccess",usesuccess);
        }
      })
      .catch(error => {
        alert("出错了");
      });
},
  mounted() {
    this.myEcharts();
    this.taEcharts();
  },
  
};
</script>

<style>
</style>